<!DOCTYPE html>
<html lang="en">
<head>
    <%include("/common/header.html",{title:'设置我的资料'}){}%>
</head>
<body>

<div id="add-main" lay-filter="add-main" style="display: none;">
    <form class="layui-form" id="add-form" action="">
        <div class="layui-form-item center" >
            <input type="hidden" name="id">
            <label class="layui-form-label" style="width: 100px" >标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" required value="" style="width: 240px" lay-verify="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">内容描述</label>
            <div class="layui-input-block">
                <input type="text" name="content" required style="width: 240px" lay-verify="content" placeholder="请输入内容描述" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">*项目展示图 &nbsp;</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <button type="button" class="layui-btn" id="upload1">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" width="260px" height="100%" id="demo1"/>
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn"  lay-filter="submission" lay-submit="">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="closeBtn" >重置</button>
            </div>
        </div>
    </form>
</div>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<%include("/common/foot.html"){}%>
<script type="text/javascript">
    layui.use(["jquery", "upload","table", "form", "layer", "element"], function () {
        var layer = layui.layer;
        var table = layui.table;
        var element = layui.element;
        var $ = layui.$;
        //数据交互路径
        var findAll_url='carousel/findAll.json';
        var update_url='carousel/update.jhtml';
        var delete_url='carousel/delete.jhtml';
        //执行一个 table 实例
        table.render({
            elem: '#demo'
            ,id: 'listReload'
            ,toolbar: 'default'
            ,defaultToolbar: ['filter', 'print', 'exports']
            ,height: 600
            ,url: findAll_url //数据接口
            ,cols: [[ //表头
                 {type: 'checkbox', fixed: 'left'}
                ,{field: 'title', title: '标题', width: 150, sort: true, totalRow: true}
                ,{field: 'content', title: '内容描述', width:150, sort: true}
                ,{field: 'image', title: '图片', width:100, templet: "#imgtmp"}
                ,{field: 'createDate', title: '更新时间', width: 150, sort: true, totalRow: true}
                ,{fixed: 'right', title:"操作",width: 165, align:'center', toolbar: '#barDemo'}
            ]]
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            alert(obj.event);
            switch(obj.event){
                case 'add':
                    initUpdate(0);
                    break;
                case 'edit':
                    initUpdate(data);
                    break;
                case 'delete':
                    var data = checkStatus.data;
                    if(data.length>0){
                        var id = new Array();//声明数组
                        for(var i in data) {
                            id[i] = data[i].id;//得到复选框的值
                        }
                        alert(id)
                        //layer.alert(JSON.stringify(data));
                        table.reload('listReload');
                        //layer.close(index);
                    }else{
                        layer.msg("至少选择一个进行删除");
                    }
                    break;
                case 'export':
                    layer.msg("导出");
                    break;
            };
        });
        //行工具栏事件监听
        table.on('tool(test)', function(obj){
            var data = obj.data;
            switch(obj.event){
                case 'detail':
                    initUpdate(0);
                    break;
                case 'edit':
                    initUpdate(data);
                    break;
                case 'del':
                   layer.confirm("确定删除吗？删除后数据将不能恢复！",function (index) {
                       $.ajax({
                            url : delete_url
                           ,type : "POST"
                           ,data : {"id":data.id}
                           ,dataType :"json"
                           ,success: function (data) {
                               if (data == null) {
                                   layer.msg("删除失败", {icon: 5});
                               } else {
                                   obj.del();//删除这一行
                                   layer.msg("删除成功", {icon: 6});
                                   layer.closeAll();
                               }
                           },
                       });
                   });
            };
        });

        //初始化修改页面
        function loadData(data){
            alert(JSON.stringify(data));
            var ret={
                "id": data.id,
                "title": data.title,
                "content": data.content
            }
            $("#demo1").attr("src", "upload/picture/"+data.image);
            return ret;
        }

        //弹出修改页面调用初始化数据方法
        function initUpdate(data){
            layer.open({
                type: 1
                , title: ['修改信息']
                , btn: ['确定', '取消']
                , area: ['500px', '600px']
                , shadeClose: true
                , shade: 0
                , content: $("#add-main")
            });
            if(data==0 || data==null){
                $(":reset").click();
                $("#demo1").attr("src", "");
                return;
            }
            layui.form.val("#add-main",loadData(data));
        }

        layui.use('upload', function () {
            var $ = layui.jquery, upload = layui.upload;
            var uploadInst = upload.render({
                elem: '#upload1',
                auto: false,
                choose: function (obj) {
                    obj.preview(function (index, file, result) {//预读本地文件示例，不支持ie8
                        console.log(JSON.stringify(obj));
                        console.log(JSON.stringify(file));
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
            });

        });
        layui.use('form', function () {
            var form = layui.form;
            form.on('submit(submission)', function (data) {
                postUpdate(data);
                return false;
            });
        });

        //ajax提交表单内容
            window.postUpdate = function (data) {

                var formData = new FormData();
                // 利用append的内置方式
                formData.append("data", JSON.stringify(data.field));
                formData.append("file", $("input[name='file']")[0].files[0]);

                $.ajax({
                    url: "carousel/update.jhtml",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if (data.code == 0) {
                            layer.closeAll();
                            layer.msg(data.msg, {time: 600, icon: 1}, function () {
                                table.reload('listReload');
                            });
                        } else {
                            layer.msg(data.msg, {icon: 5});
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        layer.open({
                            title: "错误信息",
                            type: 1,
                            content: jqXHR.responseText, //statusText
                            btn: ['关闭'] //可以无限个按钮
                        });
                    }
                });
            }
    });
</script>
<script type="text/html" id="imgtmp">
    <img src="upload/picture/{{d.image}}" style="width: 50%;height: 80px;"/>
</script>
</body>
</html>